<template>
  <div class="home">
    <router-view></router-view>
    <ul class="tabbar">
      <li
        v-for="(item, index) in list"
        :key="item.title"
        :class="{ active: active === index }"
      >
        <router-link :to="item.router" class="link">
          <span class="iconfont" :class="item.class"></span>
          <p class="title">{{ item.title }}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    const active = ref(0);
    const list = reactive([
      {
        class: "icon-shouye",
        title: "首页",
        router: "/home/recommend",
      },
      {
        class: "icon-faxian",
        title: "发现",
        router: "/home/discover",
      },
      {
        class: "icon-moments",
        title: "动态",
        router: "/home/dynamic",
      },
      {
        class: "icon-xiaoxi",
        title: "消息",
        router: "/home/message",
      },
      {
        class: "icon-youxi",
        title: "我的游戏",
        router: "/home/game",
      },
    ]);
    return {
      active,
      list,
    };
  },
};
</script>

<style lang="less" scoped>
.wrap{
  z-index: 8;
}
.tabbar {
  width: 100%;
  position: fixed;
  background-color: #fff;
  left: 0;
  bottom: 0;
  z-index: -1;
  height: 57px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .link {
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-size: 12px;
      margin-top: 4px;
    }
  }
}
.iconfont {
  font-size: 22px;
}
.router-link-active {
  color: #34c3c6;
}
</style>
